<template>
  <el-row
    type="flex"
    justify="center"
    class="head-tools"
    :class="{ active: homeExample.pattern === '编辑模式' }"
  >
    <div class="canvas-name">画布名称： {{ canvas.label }}</div>
    <!-- <el-col :span="15"> -->
    <el-button
      type="text"
      icon="el-icon-folder-add"
      class="save"
      @click="saveCanvas"
      v-if="homeExample.pattern === '编辑模式'"
      >保存画布</el-button
    >
    <el-button
      type="text"
      icon="el-icon-rank"
      class="drag"
      @click="changeViewType()"
      v-if="homeExample.pattern === '编辑模式'"
      >{{ viewType === "form" ? "固定拖拽" : "自由拖拽" }}</el-button
    >
    <el-button
      type="text"
      class="model"
      :icon="
        homeExample.pattern === '编辑模式'
          ? 'el-icon-edit-outline'
          : 'el-icon-video-play'
      "
      :disabled="componentsList.length === 0"
      @click="checkPattern"
      >{{ homeExample.pattern }}</el-button
    >
    <template v-if="homeExample.pattern === '编辑模式'">
      <el-button
        type="text"
        class="export"
        icon="el-icon-document-copy"
        :disabled="componentsList.length === 0"
        @click="openDialog('export')"
        >导出vue文件</el-button
      >
      <el-button
        type="text"
        class="privew"
        icon="el-icon-document-copy"
        :disabled="componentsList.length === 0"
        @click="openDialog('preview')"
        >预览代码</el-button
      >
      <!-- <el-button type="danger" icon="el-icon-delete">清空</el-button> -->
      <el-button
        type="text"
        class="delete"
        icon="el-icon-delete"
        @click="clear"
        :disabled="componentsList.length === 0"
        >清空</el-button
      >
    </template>
    <el-button
      type="text"
      class="theme"
      :class="{ active: theme === 'normal-theme' }"
      icon="el-icon-monitor"
      @click="setTheme(theme)"
      >{{ theme === "normal-theme" ? "白天" : "黑夜" }}</el-button
    >
    <!-- </el-col> -->
  </el-row>
</template>

<script>
import { createNamespacedHelpers, mapGetters } from "vuex";
const { mapMutations } = createNamespacedHelpers("view");
const { mapMutations: canvasMapMutations } = createNamespacedHelpers("canvas");
const { mapMutations: themeMapMutations } = createNamespacedHelpers("theme");
export default {
  name: "navBar",
  inject: ["homeExample"],
  computed: {
    ...mapGetters([
      "componentsList",
      "theme",
      "viewType",
      "canvasList",
      "canvas",
    ]),
  },
  mounted() {},
  methods: {
    ...mapMutations({
      removeComponentsList: "REMOVE_COMPONENTS_LIST",
      changeViewType: "CHANGE_VIEWTYPE",
    }),
    ...canvasMapMutations({
      setCanvas: "SET_CANVAS",
      removeCanvas: "REMOVE_CANVAS",
    }),
    ...themeMapMutations({
      setTheme: "SET_THEME",
    }),
    // 清空组件
    clear() {
      this.$confirm("确认清空所有组件吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeComponentsList("all");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 主题切换0000
    checkPattern() {
      this.homeExample.pattern =
        this.homeExample.pattern === "编辑模式" ? "预览模式" : "编辑模式";
    },
    openDialog(type) {
      this.homeExample.openDialog(type);
    },
    // 保存当前画布
    saveCanvas() {
      this.$prompt("请输入画布名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          const a = this.canvasList.find((item) => item.label === value);
          if (!value) {
            return "输入不能为空";
          } else if (a) {
            return "画布名称重复";
          }
        },
      })
        .then(({ value }) => {
          this.setCanvas({
            id: "id" + (this.canvasList.length + 1),
            label: value,
            componentsList: JSON.parse(JSON.stringify(this.componentsList)),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消保存",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.head-tools {
  position: absolute;
  z-index: 2000;
  width: 100%;
  padding: 0 20%;
  background-color: #031c42;
  .canvas-name {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-right: 20px;
    flex: 1;
    justify-content: center;
  }
}
</style>